<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask">
    </div>
    <div>
    <!--lorem *60-->
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolor dolore eius exercitationem, iure
            minima molestiae optio quidem repellat sint ut voluptatem? Aspernatur earum iste laboriosam non quia
            repudiandae, voluptas.
        </div>
        <div>Ad asperiores autem blanditiis corporis cumque deleniti dicta doloremque facilis illum, ipsum libero nam,
            nesciunt nobis quod unde? Accusamus ad aliquam cupiditate debitis exercitationem ipsam qui quis repellendus
            tempora veniam!
        </div>
        <div>Aliquam aut cum cumque cupiditate, dolores ea eius expedita id ipsum iure labore minus, modi necessitatibus
            neque numquam pariatur provident quibusdam quidem ratione reprehenderit tempore ut velit voluptatem
            voluptates voluptatibus!
        </div>
        <div>Accusantium, atque commodi consequuntur cum deserunt dignissimos dolore enim eum eveniet fuga hic magnam,
            maxime modi natus neque obcaecati pariatur perferendis quae quos rem rerum sit soluta ullam veritatis
            voluptates!
        </div>
        <div>Ab accusamus, adipisci architecto assumenda, cumque debitis delectus deleniti dignissimos ducimus earum
            exercitationem ipsa necessitatibus nihil nobis non pariatur quibusdam quod repellendus reprehenderit, rerum
            sapiente ullam veniam veritatis vitae voluptatibus!
        </div>
        <div>Culpa, iure, nostrum. Amet, architecto beatae dolore eos excepturi harum illum impedit ipsam ipsum magnam
            maiores, mollitia optio praesentium reiciendis rerum sapiente totam unde ut velit voluptatum? Accusamus,
            ipsa voluptatem.
        </div>
        <div>Autem consectetur consequuntur corporis culpa deserunt dolorem dolores dolorum eius est in ipsam laborum
            molestias nam provident quae quaerat quis quisquam soluta tempora ullam, veniam vero voluptates. A, animi,
            cum?
        </div>
        <div>Alias aspernatur blanditiis consequatur, minima modi nam, nostrum odio perspiciatis porro quaerat rerum
            saepe sequi, ullam? Accusamus commodi cum eius esse exercitationem laboriosam laborum, nesciunt nihil
            officiis quas, quo, voluptatem.
        </div>
        <div>Esse illum necessitatibus omnis quidem quod repellat repudiandae sunt veniam voluptas. Accusamus adipisci
            aliquam consequuntur dicta dignissimos illo, iste itaque magni maxime quidem ratione repellendus soluta
            tenetur ut voluptatem voluptatum.
        </div>
        <div>Ad animi culpa, debitis dicta eius est et facere fuga magni maxime minima nemo quis, recusandae sit
            suscipit veniam vitae voluptatem voluptatum! Accusamus aliquam amet animi consectetur deleniti inventore
            magnam.
        </div>
        <div>Architecto atque aut distinctio fugit impedit ipsum minima nulla quo voluptatem voluptatum. Deleniti esse
            temporibus totam. Aliquam aspernatur cupiditate deleniti error inventore itaque laborum nihil odit omnis,
            pariatur. Atque, corporis!
        </div>
        <div>Aliquid deleniti deserunt dolore doloremque dolores doloribus eum ex fugiat hic ipsam minima modi nam natus
            nesciunt nobis nulla odio pariatur, quas quod tenetur unde veniam vitae voluptate voluptatem voluptatibus?
        </div>
        <div>Architecto assumenda corporis fuga laudantium molestias nemo possimus qui repellendus. Commodi dicta
            mollitia, nesciunt provident quibusdam temporibus. Aliquam dignissimos eaque libero magni nostrum optio
            possimus quis quos, saepe voluptate! Delectus!
        </div>
        <div>Ad animi aperiam commodi debitis delectus dolore enim expedita ipsam laborum, maiores nam necessitatibus
            neque nihil nostrum odit provident quam, quas quasi quisquam quo ratione rem sapiente sit tempore ut.
        </div>
        <div>Aspernatur consectetur dignissimos dolor eaque, et illum iure labore laboriosam officiis perferendis porro
            qui quos ratione reiciendis sunt temporibus veritatis! Ad autem dolorem enim iusto minus neque nesciunt
            pariatur rem!
        </div>
        <div>Ad adipisci consequatur, debitis, delectus dolorem excepturi illo, laboriosam magni mollitia necessitatibus
            nostrum obcaecati quisquam voluptatem. Consequatur debitis, dolore dolorem dolores, exercitationem labore,
            natus odio quod totam ullam unde voluptates?
        </div>
        <div>Amet aspernatur consequuntur culpa distinctio, dolore dolores dolorum expedita incidunt ipsam, iste laborum
            praesentium, reprehenderit similique soluta vero! A aliquid commodi debitis dignissimos dolorem eos ex
            facere quas totam ut.
        </div>
        <div>Aliquid cum, eius ipsum molestias natus necessitatibus repellat ullam voluptas! Architecto fuga, labore
            laboriosam odit reiciendis saepe! Alias, cumque expedita, explicabo hic odit quae quasi repellat unde velit
            veniam voluptate.
        </div>
        <div>Adipisci alias aliquid animi autem, beatae blanditiis debitis delectus deleniti dolores doloribus, ducimus
            illum, ipsum labore laboriosam magni minus necessitatibus nihil officia officiis praesentium ratione
            repellat reprehenderit rerum totam veniam?
        </div>
        <div>Expedita, illo veniam! Alias dignissimos eius, ipsa molestiae non porro tenetur velit voluptas! Ad
            architecto at consectetur eaque eveniet in modi, nobis, odio perspiciatis quae quidem repellat repudiandae
            tempore ut!
        </div>
        <div>Adipisci debitis dolorem explicabo magnam necessitatibus sapiente tempora voluptates! Adipisci deserunt,
            eos et minus neque pariatur quam quibusdam quos sunt. Aliquid commodi deserunt itaque, nisi numquam quo quos
            sunt veritatis.
        </div>
        <div>Adipisci ducimus id illo inventore natus officia optio perferendis quibusdam quisquam quo, quod ratione
            vel. Accusantium, culpa nisi. Cum dignissimos doloremque excepturi facilis inventore laudantium libero
            nesciunt obcaecati officiis soluta.
        </div>
        <div>Accusamus adipisci commodi consequatur consequuntur cum eos esse incidunt maxime molestiae, nam nisi,
            officia provident sequi suscipit ullam. Quas, repudiandae, tempora. Asperiores et exercitationem fuga ipsum
            natus, neque nesciunt qui.
        </div>
        <div>Ad delectus dicta distinctio doloremque, doloribus expedita impedit laborum mollitia, neque nesciunt odit
            quia quibusdam quidem quo quos ullam vitae voluptas. Amet asperiores aspernatur at distinctio, ducimus optio
            saepe suscipit!
        </div>
        <div>Alias dolorem eaque est fugit maiores maxime molestiae nemo quaerat quisquam. Adipisci deserunt, dolorum
            enim ipsam obcaecati quam quod rem veritatis. Earum eos obcaecati quas, ratione reprehenderit suscipit velit
            voluptas.
        </div>
        <div>Accusamus adipisci, aliquam amet animi aut blanditiis dolorum enim eos error eum excepturi illum, impedit
            incidunt modi nisi odio quidem quisquam quo recusandae rem temporibus unde voluptas. Harum quasi, soluta?
        </div>
        <div>Aliquam, aspernatur consectetur corporis cum dignissimos et expedita explicabo facilis mollitia nobis odit
            officiis perspiciatis placeat porro possimus quam quo repudiandae saepe similique sint sit soluta tempora
            tenetur veritatis voluptatum.
        </div>
        <div>Adipisci assumenda distinctio enim, ex fuga hic illo ipsum minima nisi quisquam quo suscipit. Aliquid
            aspernatur deserunt eaque eum, labore perferendis quaerat quis rerum! Adipisci ea nisi quam reiciendis
            totam!
        </div>
        <div>Ab, adipisci autem dolor eaque enim eum fugiat illum, impedit ipsa laudantium pariatur quae quo vel.
            Accusantium cumque esse illo iusto minima non nostrum porro quas reiciendis totam vero, voluptate.
        </div>
        <div>A alias, animi corporis culpa dignissimos dolorem eius eum, exercitationem ipsam laborum magni nemo neque
            nesciunt nisi odit quisquam ratione sapiente suscipit ullam unde vitae voluptates voluptatum. Dignissimos,
            impedit vero.
        </div>
        <div>Architecto consequatur delectus doloremque expedita explicabo, facilis fuga, fugit itaque laborum molestias
            quo quod. Aliquam, atque, debitis dignissimos eius eum facere harum illo illum in magni quis rem unde vero?
        </div>
        <div>Aliquam at culpa cumque eius enim eos esse, est expedita harum illo impedit iste itaque, iure iusto nostrum
            perferendis porro possimus provident saepe totam ut vel veritatis vero vitae voluptate.
        </div>
        <div>Ab aliquid at aut distinctio dolor ea eligendi esse fuga hic incidunt iusto maxime molestiae nihil odio
            officia provident quas ratione sed sint, ullam. Aperiam dicta fugit in sunt ullam?
        </div>
        <div>Ad animi, aperiam consectetur consequuntur, dolores ducimus ea laborum molestias natus officiis pariatur
            possimus quisquam repudiandae similique, vitae. Dolorum excepturi facere in ipsa, magnam odio officia porro
            rem vero voluptatum.
        </div>
        <div>Ad aliquid atque deleniti eligendi eum, exercitationem, ipsa, labore maxime obcaecati odit officia unde!
            Animi consequatur eum, expedita ipsam officia recusandae sit tempora. Dolor doloribus eum quo repudiandae
            sunt tenetur.
        </div>
        <div>Ab consequatur deserunt dignissimos, dolor facere illo odit omnis possimus praesentium quaerat quo ullam
            voluptates. Assumenda blanditiis cumque distinctio esse facere illum molestiae necessitatibus, neque quas
            tempore. Facere, iste, vitae.
        </div>
        <div>Fuga labore odit quasi unde ut. Aperiam consectetur cumque dicta dolores ex explicabo in magni minus modi
            quaerat, reiciendis sequi sint temporibus vel veniam, voluptate voluptatem. Eum neque nisi repellendus.
        </div>
        <div>Alias aliquam corporis ea harum ipsum labore libero molestias nihil nisi non odit possimus quia,
            repellendus? Commodi consequatur corporis culpa, debitis doloribus eveniet id labore molestias nemo optio
            quos repellat!
        </div>
        <div>At commodi debitis delectus dolorem fuga illo minus nulla odit saepe temporibus. Accusantium consequatur
            dolorum, eos error excepturi fugiat ipsa ipsum iure laudantium non quibusdam quos ratione rem ut velit.
        </div>
        <div>Blanditiis cumque dicta eius ex explicabo laborum, laudantium natus praesentium quidem tempore. Atque
            dolorum ducimus necessitatibus officiis perferendis quis quo quos sapiente temporibus. Dolorum facilis
            fugiat perspiciatis quis similique veritatis.
        </div>
        <div>Aliquid dicta ducimus, est illum modi obcaecati praesentium quo? Adipisci assumenda est ipsum itaque iure
            maxime necessitatibus nemo, officia! Asperiores autem dicta dolorem fugit id possimus, quia. Earum et,
            tempore.
        </div>
        <div>Asperiores consequatur earum necessitatibus odio officiis, quasi quisquam rem repudiandae veritatis. Atque,
            est fugit ipsam laborum nihil nobis reiciendis sequi temporibus tenetur ullam. Blanditiis neque officiis
            quae qui, sit voluptates.
        </div>
        <div>Aliquam assumenda consequuntur dolores error necessitatibus qui sequi sit voluptates? Dignissimos earum hic
            nam! Aliquid, animi autem consequatur dignissimos et laboriosam libero omnis reiciendis sequi, similique ut
            veniam vero voluptatum.
        </div>
        <div>Accusantium iure mollitia nulla qui? Commodi dolore ducimus ea impedit ipsam itaque laborum minima, nemo
            nihil nobis non, provident quis repellendus saepe similique tempore temporibus voluptatum? Reprehenderit
            temporibus ullam voluptas!
        </div>
        <div>Adipisci, commodi delectus dignissimos ea excepturi fugiat impedit placeat reiciendis rem sapiente soluta
            tempora. Autem delectus dicta dolore et fugit ipsa libero magni modi, nostrum numquam omnis repellat unde,
            voluptate?
        </div>
        <div>Culpa cupiditate ea in laudantium maiores, nam repellat. Ab ad aperiam culpa cum eaque eos eum fuga illum
            iusto magnam magni nemo numquam, provident sapiente, similique sint temporibus veritatis voluptatibus.
        </div>
        <div>Architecto, asperiores blanditiis culpa deserunt dolor eaque, explicabo in incidunt iusto natus nesciunt
            odit repellendus voluptas. Assumenda corporis eveniet facere nemo nulla pariatur praesentium quam sequi
            veniam veritatis. Laborum, laudantium?
        </div>
        <div>Corporis error est libero. At corporis, earum enim in laborum modi quam quidem tenetur! Beatae consequatur
            dolore dolorum enim eum libero modi, necessitatibus nobis odio quam, quos suscipit vero voluptas.
        </div>
        <div>Architecto hic ipsa necessitatibus quaerat veritatis. A esse, impedit ipsam magnam maiores neque
            reprehenderit voluptates? Adipisci aut consequuntur dolor eum expedita illo labore, libero molestiae
            perspiciatis, rerum, sunt velit veritatis!
        </div>
        <div>Animi aperiam error esse quae totam vitae. Adipisci excepturi, tempore? Nostrum qui, repudiandae! Commodi
            consectetur earum expedita, iure maxime minima minus quidem ratione soluta tempore totam vero voluptates.
            Atque, totam!
        </div>
        <div>Accusantium assumenda corporis eos esse quisquam repellendus sapiente, similique soluta voluptate? Ad alias
            corporis cupiditate, deleniti ea ex ipsam iusto minima odit quia quidem quod recusandae voluptate. Ipsum,
            quas, vitae?
        </div>
        <div>A architecto asperiores distinctio dolorem dolorum ducimus excepturi facilis ipsa ipsum iste laudantium,
            modi, molestias nemo non nulla odio odit quidem quis quos sed sit ullam veritatis vero voluptas voluptatem.
        </div>
        <div>A ad animi delectus dignissimos ducimus et excepturi impedit inventore ipsum, labore magni mollitia nemo
            neque non officiis optio, quaerat quas rem sapiente sed totam, unde vitae voluptatem? Accusantium, animi.
        </div>
        <div>Ab accusamus ad adipisci amet, animi asperiores autem culpa delectus, dolorem doloremque, dolores labore
            libero magnam maiores modi nesciunt omnis pariatur perferendis recusandae rerum soluta tempora temporibus
            vitae voluptas voluptatibus!
        </div>
        <div>Autem corporis deserunt dignissimos dolor ea est eum facere, facilis id labore laboriosam magni
            necessitatibus nihil nisi obcaecati officiis, possimus qui repellendus, similique sunt? Commodi dolores esse
            officiis similique veniam!
        </div>
        <div>Accusamus aliquam aut delectus dolore dolorum ea et excepturi fuga hic impedit iste laborum, libero minus
            mollitia necessitatibus, nihil odio optio quasi quisquam recusandae rem saepe sit veritatis voluptas
            voluptatem!
        </div>
        <div>Asperiores debitis dignissimos dolor eligendi fugiat in itaque libero modi non officiis quidem ratione
            repellat tempore totam veniam, vero voluptates! Architecto blanditiis dolore dolorem, explicabo laboriosam
            quibusdam quisquam similique unde.
        </div>
        <div>Dicta dolores earum et facere molestiae ratione recusandae sunt ullam unde vel? Culpa error fuga impedit
            iste minus non, nostrum omnis quasi ullam voluptates! Corporis dolore nobis officia possimus unde!
        </div>
        <div>Ab aliquid amet, at, autem corporis cumque dolores eum excepturi exercitationem explicabo impedit mollitia
            nam nemo neque nihil non quas quo rem, repellat reprehenderit rerum saepe unde veritatis vitae voluptatem.
        </div>
        <div>Amet dolore exercitationem repellendus ut! Adipisci consectetur culpa dolores eligendi, eum exercitationem
            id illo illum impedit ipsa iusto laudantium non nostrum numquam officia perspiciatis possimus quia quisquam
            sit suscipit vel?
        </div>
    </div>
</body>
</html>